<template>
    <view style="height: 100%">
        <s-nav title="便民服务"></s-nav>
        <s-content>
            <s-card>
                <template #header>
                    <view class="card-header">
                        <view class="ornamental"></view>
                        <view class="title">申请详情</view>
                    </view>
                </template>
                <view class="content">
                    <card-item label="证明类型" :value="data.type"></card-item>
                    <card-item label="申请事项" :value="data.applicationItems"></card-item>
                    <card-item label="具体内容" :value="data.applicationItemsDetail"></card-item>
                    <card-item label="用章类型" :value="data.stampType"></card-item>
                    <card-item  v-if="!!file"  label="附件" :value="file.fileName" @click="download()"></card-item>
                </view>
            </s-card>
            <s-card>
                <template #header>
                    <view class="card-header">
                        <view class="ornamental"></view>
                        <view class="title">事项进度</view>
                    </view>
                </template>
                <view class="content">
                    <uni-steps :options="list" active-color="#04A190" :active="list.length" direction="column" />
                </view>
            </s-card>
        </s-content>
    </view>
</template>
<script>
import { REQUEST_SUCCESS_CODE } from '../../constant';
import { get } from '../../utils/request';
import CardItem from './card-item.vue';
export default {
    components: {
        CardItem
    },
    data(){
        return {
            data: {},
            list: [{
					title: '提交申请',
					desc: '2018-11-11'
				}],
            file:null,
        }
    },
    onLoad(param){
        this.data = JSON.parse(param.params);
        this.getDetail();
    },
    methods: {
        // 获取证明详情数据
        async getDetail(){
            const result = await get(`/api/application/xsbsCertifyInfo/app/pageDetailCertifyInfo`,{id:this.data.id});
            if(result.code === REQUEST_SUCCESS_CODE) {
                const list = [];
                result.data.list.forEach(l=>{
                    list.push({title: l.flowStatusName,desc: `审核人：${l.auditUserName}-创建时间：${l.createdTs}`})
                })
                this.list = list;
                if(result.data.fileUrl) {
                    const {fileUrl,fileName} = result.data;
                    this.file = {fileUrl,fileName}
                }
            }
        },
        // 下载图片
        download(){
            console.log(1);
            const header = {};
            header['dx-source'] = 'APP'
	        header['government-token'] = 'a30ead4e96c58dc48dfb949a3c288d9d82d8366c2d271da1eea21b5b69cbb9aa18696a3c3a5f17ccea4d159a9843ce6b64123f994f9a640644bdb307085900cf125df01629fdf44ab836e560b562281a3a7c2392966e72ac26c13e39f7ff489a7692b606ef7f263fc011106c5fbc7cfc'
            uni.downloadFile({
                url: 'https://www.yht.118114.cq.cn/api/application/file/download?fileName=' + this.file.fileUrl,
                header,
                success(res){
                    uni.saveImageToPhotosAlbum({
                        filePath: res.tempFilePath,
                        success(e){
                            uni.showToast({title: '保存相册成功'});
                        },
                        fail(e){
                            uni.showToast('保存失败');
                        }
                    })
                }
            })
        },
           //组装图片地址
        // bannerListImageApi(url) {
        //     return 'https://www.yht.118114.cq.cn/api/application/file/download?fileName=' + this.file.fileUrl;
        // },
    }

}
</script>


<style lang="scss">
.card-header {
    height: 44rpx;
    display: flex;
    align-items: center;
    margin-bottom: 36rpx;
    .ornamental {
        width: 12rpx;
        height: 100%;
        background: #04A190;
        border-radius:6rpx;
        margin-right: 16rpx;
    }
    .title {
        font-size: 32rpx;
        font-weight: 800;
        color: #222222;
    }
}
.content {
    display: flex;
    flex-direction:column;
    gap: 16rpx;
}
</style>